<template>
  <div class="guide">
    <div class="title title_img"></div>
    <div class="title title_text">智能网联汽车大数据云控基础平台</div>
    <div
      class="system server"
      :class="[system === 'server' ? 'checked' : '']"
      @click="systemSelected('server')"
    >
      <span>服务中心</span>
    </div>
    <div
      class="system account"
      :class="[system === 'account' ? 'checked' : '']"
      @click="systemSelected('account')"
    >
      <span>统一账户</span>
    </div>
    <SubMenu
      :icon="UserIcon"
      title="用户管理"
      @click="systemSelected('user')"
      :class="['account_menu--user', system === 'account' ? 'show' : '']"
    />
    <SubMenu
      :icon="PrivilegeIcon"
      title="权限管理"
      @click="systemSelected('privilege')"
      :class="['account_menu--privilege', system === 'account' ? 'show' : '']"
    />
    <div
      class="system visual"
      :class="[system === 'visual' ? 'checked' : '']"
      @click="systemSelected('visual')"
    >
      <span>数据可视化</span>
    </div>
    <div
      class="system manager"
      :class="[system === 'manager' ? 'checked' : '']"
      @click="systemSelected('manager')"
    >
      <span>运营管理</span>
    </div>
    <SubMenu
      :icon="PortalIcon"
      title="门户管理"
      @click="systemSelected('portal')"
      :class="['account_menu--portal', system === 'manager' ? 'show' : '']"
    />
    <SubMenu
      :icon="AmbariIcon"
      title="Ambari"
      @click="systemSelected('ambari')"
      :class="['account_menu--ambari', system === 'manager' ? 'show' : '']"
    />
     <SubMenu
      :icon="CtmIcon"
      title="CtmAudit"
      @click="systemSelected('ctm')"
      :class="['account_menu--ctm', system === 'manager' ? 'show' : '']"
    />
    <SubMenu
      :icon="PPManIcon"
      title="PPMan"
      @click="systemSelected('ppman')"
      :class="['account_menu--ppman', system === 'manager' ? 'show' : '']"
    />
    <div class="center">
      <div class="text_box">
        <span>中心云</span>
      </div>
    </div>
    <RotatingRing class="rotating_ring" />
    <Diffusion />
  </div>
</template>

<script setup>
import { ref } from "vue";
import { getUser } from "../../api/login";
import { useRouter } from "vue-router";
import {message} from 'ant-design-vue';
import SubMenu from "./SubMenu.vue";
import UserIcon from "@/assets/images/guide/user.png";
import PrivilegeIcon from "@/assets/images/guide/privilege.png";
import PortalIcon from "@/assets/images/guide/portal.png";
import AmbariIcon from "@/assets/images/guide/ambari.png";
import CtmIcon from "@/assets/images/guide/ctm.png";
import PPManIcon from "@/assets/images/guide/ppman.png";
import RotatingRing from './AnimationRotatingRing.vue';
import Diffusion from './AnimationDiffusion.vue';
const router = useRouter();
const system = ref("");
const systemList = {
  user: window.g.guide.user,
  privilege: window.g.guide.privilege,
  ambari: window.g.guide.ambari,
  portal: window.g.guide.portal,
  server: window.g.guide.server,
  position: window.g.guide.position,
  visual: window.g.guide.visual,
  ctm: window.g.guide.ctm,
  ppman: window.g.guide.ppman
}
const phone = ref(undefined);
getUser().then((res) => {
  if (res.code !== 0) {
    router.replace({ path: "/login" })
  }else{
    phone.value = res.data.phone;
  }
})

const systemSelected = (name) => {
  system.value = system.value === name ? "" : name;
  switch (name) {
    case "account":
    case "manager":
        break;
    case "visual":
    case "ambari":
      window.open(systemList[name])
      break;
    case "server":
      const serverUrl = systemList[name]+'?phone='+phone.value;
      window.open(serverUrl);
      break;
    default:
      const url = systemList[name]+'?token='+sessionStorage.getItem('token');
      window.open(url);
      break;
  }
}
</script>
<style scoped>
.guide {
  background-image: url(../../../src/assets/images/guide/guide_bg.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  color: white;
  position: relative;
  overflow: hidden;
  z-index: 0;
}
.title {
  position: absolute;
  top: 0;
  width: 100%;
}
.title_img {
  background-image: url(../../../src/assets/images/guide/title.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 21.6%;
  left: -1.38%;
}
.title_text {
  left: 0;
  font-size: 36px;
  font-weight: bold;
  text-align: center;
}
.system {
  background-repeat: no-repeat;
  background-position: center;
  width: 25.5vh;
  height: 25.5%;
  border-radius: 12.75vh;
  background-size: 140% 140%;
  box-shadow: 0 0 30px 5px rgba(0, 200, 255, 0.2);
  cursor: pointer;
  font-size: 20px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 10;
}
.checked {
  box-shadow: 0 0 30px 5px rgba(0, 200, 255, 0.6);
}
.system > span {
  margin-bottom: 4.2vh;
}
.server {
  background-image: url(../../../src/assets/images/guide/server_center.png);
  position: absolute;
  top: 15.76%;
  right: calc(50% - 40.75vh);
}

.account {
  background-image: url(../../../src/assets/images/guide/account.png);
  position: absolute;
  top: 15.76%;
  left: calc(50% - 40.75vh);
}

.visual {
  background-image: url(../../../src/assets/images/guide/position.png);
  position: absolute;
  bottom: 22.25%;
  left: calc(50% - 58.75vh);
}

.manager {
  background-image: url(../../../src/assets/images/guide/manager.png);
  position: absolute;
  bottom: 22.25%;
  right: calc(50% - 58.75vh);
}

.center {
  position: absolute;
  bottom: 2.2%;
  left: calc((100% - 79.4vh) * 0.5);
  width: 79.4vh;
  height: 65.6%;
  background-image: url(../../assets/images/guide/visual.png);
  background-position: center;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 0.7vh;
  font-size: 2rem;
  z-index: 3;
}

.inner {
  width: 45vh;
  height: 45vh;
  border-radius: 22.5vh;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 7vh;
  font-size: 24px;
}

.account_menu--user,
.account_menu--privilege {
  left: calc(50% - 40.75vh + 12.75vh - 2.8125rem);
  top: calc(15.76% + 12.75vh - 2.8125rem);
  z-index: 1;
  opacity: 0;
}
.account_menu--user {
  animation: uHide 0.2s;
}

.account_menu--privilege {
  animation: pHide 0.2s;
}
.account_menu--user.show {
  top: calc(15.76% + 12.75vh - 5.625rem - 0.875rem);
  left: calc(50% - 40.75vh + 25.5vh + 1rem);
  animation: uShow 0.5s;
  opacity: 1;
}
.account_menu--privilege.show {
  top: calc(15.76% + 12.75vh + 0.875rem);
  left: calc(50% - 40.75vh + 25.5vh + 1rem);
  animation: pShow 0.5s;
  opacity: 1;
}

@keyframes uShow {
  from {
    left: calc(50% - 40.75vh + 12.75vh - 2.8125rem);
    top: calc(15.76% + 12.75vh - 2.8125rem);
    opacity: 0;
  }
  to {
    top: calc(15.76% + 12.75vh - 5.625rem - 0.875rem);
    left: calc(50% - 40.75vh + 25.5vh + 1rem);
    opacity: 1;
  }
}
@keyframes uHide {
  to {
    left: calc(50% - 40.75vh + 12.75vh - 2.8125rem);
    top: calc(15.76% + 12.75vh - 2.8125rem);
    opacity: 1;
  }
  from {
    top: calc(19.175% - 2.8125rem);
    left: calc(50% - 40.75vh + 25.5vh + 1rem);
    opacity: 0;
  }
}
@keyframes pShow {
  from {
    left: calc(50% - 40.75vh + 12.75vh - 2.8125rem);
    top: calc(15.76% + 12.75vh - 2.8125rem);
    opacity: 0;
  }
  to {
    top: calc(15.76% + 12.75vh + 0.875rem);
    left: calc(50% - 40.75vh + 25.5vh + 1rem);
    opacity: 1;
  }
}
@keyframes pHide {
  to {
    left: calc(50% - 40.75vh + 12.75vh - 2.8125rem);
    top: calc(15.76% + 12.75vh - 2.8125rem);
    opacity: 1;
  }
  from {
    top: calc(15.76% + 12.75vh - 2.8125rem);
    left: calc(50% - 40.75vh + 25.5vh + 1rem);
    opacity: 0;
  }
}
.account_menu--portal,
.account_menu--ambari,
.account_menu--ctm,
.account_menu--ppman {
  z-index: 1;
  opacity: 0;
  right: calc(50% - 58.75vh + 12.75vh - 2.8125rem);
  bottom: calc(22.25% + 12.75vh - 2.8125rem);
}
.account_menu--portal {
  animation: poHide 0.2s;
}
.account_menu--ambari {
  animation: aHide 0.2s;
}
.account_menu--ctm {
  animation: cHide 0.2s;
}

.account_menu--ctm {
  animation: ppHide 0.2s;
}
.account_menu--portal.show {
  bottom: calc(22.25% + 12.75vh + 2.625rem + 5.625rem);
  right: calc(50% - 58.75vh - 1rem - 5.625rem);
  opacity: 1;
  animation: poShow 0.5s;
}
.account_menu--ambari.show {
  bottom: calc(22.25% + 12.75vh + 0.875rem);
  right: calc(50% - 58.75vh - 1rem - 5.625rem);
  opacity: 1;
  animation: aShow 0.5s;
}
.account_menu--ctm.show {
  bottom: calc(22.25% + 12.75vh - 0.875rem - 5.625rem);
  right: calc(50% - 58.75vh - 1rem - 5.625rem);
  opacity: 1;
  animation: cShow 0.5s;
}
.account_menu--ppman.show {
  bottom: calc(22.25% + 12.75vh - 2.625rem - 5.625rem - 5.625rem);
  right: calc(50% - 58.75vh - 1rem - 5.625rem);
  opacity: 1;
  animation: ppShow 0.5s;
}
@keyframes poShow {
  from {
    opacity: 0;
    right: calc(50% - 58.75vh + 12.75vh - 2.8125rem);
    bottom: calc(22.25% + 12.75vh - 2.8125rem);
  }
  to {
    bottom: calc(22.25% + 12.75vh + 2.625rem + 5.625rem);
    right: calc(50% - 58.75vh - 1rem - 5.625rem);
    opacity: 1;
  }
}
@keyframes poHide {
  from {
    bottom: calc(22.25% + 12.75vh + 2.625rem + 5.625rem);
    right: calc(50% - 58.75vh - 1rem - 5.625rem);
    opacity: 1;
  }
  to {
    opacity: 0;
    right: calc(50% - 58.75vh + 12.75vh - 2.8125rem);
    bottom: calc(22.25% + 12.75vh - 2.8125rem);
  }
}
@keyframes aShow {
  from {
    opacity: 0;
    right: calc(50% - 58.75vh + 12.75vh - 2.8125rem);
    bottom: calc(22.25% + 12.75vh - 2.8125rem);
  }
  to {
    bottom: calc(22.25% + 12.75vh + 0.875rem);
    right: calc(50% - 58.75vh - 1rem - 5.625rem);
    opacity: 1;
  }
}
@keyframes aHide {
  to {
    opacity: 0;
    right: calc(50% - 58.75vh + 12.75vh - 2.8125rem);
    bottom: calc(22.25% + 12.75vh - 2.8125rem);
  }
  from {
    bottom: calc(22.25% + 12.75vh + 0.875rem);
    right: calc(50% - 58.75vh - 1rem - 5.625rem);
    opacity: 1;
  }
}
@keyframes cShow {
  from {
    opacity: 0;
    right: calc(50% - 58.75vh + 12.75vh - 2.8125rem);
    bottom: calc(22.25% + 12.75vh - 2.8125rem);
  }
  to {
    bottom: calc(22.25% + 12.75vh - 0.875rem - 5.625rem);
    right: calc(50% - 58.75vh - 1rem - 5.625rem);
    opacity: 1;
  }
}
@keyframes cHide {
  to {
    opacity: 0;
    right: calc(50% - 58.75vh + 12.75vh - 2.8125rem);
    bottom: calc(22.25% + 12.75vh - 2.8125rem);
  }
  from {
    bottom: calc(22.25% + 12.75vh - 1rem - 5.625rem);
    right: calc(50% - 58.75vh - 1rem - 5.625rem);
    opacity: 1;
  }
}
@keyframes ppShow {
  from {
    opacity: 0;
    right: calc(50% - 58.75vh + 12.75vh - 2.8125rem);
    bottom: calc(22.25% + 12.75vh - 2.8125rem);
  }
  to {
    bottom: calc(22.25% + 12.75vh - 2.625rem - 5.625rem - 5.625rem);
    right: calc(50% - 58.75vh - 1rem - 5.625rem);
    opacity: 1;
  }
}
@keyframes ppHide {
  from {
    bottom: calc(22.25% + 12.75vh - 2.625rem - 5.625rem - 5.625rem);
    right: calc(50% - 58.75vh - 1rem - 5.625rem);
    opacity: 1;
  }
  to {
    opacity: 0;
    right: calc(50% - 58.75vh + 12.75vh - 2.8125rem);
    bottom: calc(22.25% + 12.75vh - 2.8125rem);
  }
}

.rotating_ring {
  left: calc(50% - 46vh);
  bottom: -11%;
}

.text_box {
  width: 42vh;
  height: 12vh;
  background-image: url("@/assets/images/guide/text_bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: PingFang SC-Semibold, PingFang SC;
  font-weight: 600;
  color: #ffffff;
  line-height: 0px;
  letter-spacing: 0.25rem;
  text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3);
}
</style>
